<template>
  <div>
    <!-- 分配权限弹层------对话框 -->
    <el-dialog
      title="分配权限"
      :visible="permissionDialog"
      @close="handelClose"
    >
      <el-tree
        ref="perTree"
        :data="perData"
        :props="defaultProps"
        :show-checkbox="true"
        :check-strictly="true"
        :default-expand-all="true"
        :default-checked-keys="selectCheck"
        node-key="id"
      >
      </el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handelClose">取 消</el-button>
        <el-button type="primary" @click="handelSure">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getAllPermission } from "@/api/permission";
import { assignPrem } from "@/api/setting";
import { transTree } from "@/utils";
export default {
  props: {
    permissionDialog: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      perData: [],
      selectCheck: [],
      roleId: "",
      defaultProps: {
        label: "name",
      },
    };
  },
  created() {
    this.getTree();
  },
  methods: {
    async getTree() {
      this.perData = transTree(await getAllPermission());
    },
    async handelSure() {
      // console.log(this.$refs.perTree.getCheckedKeys()) 获取选中的节点
      await assignPrem({id: this.roleId, permIds: this.$refs.perTree.getCheckedKeys()});
      this.$message.success("分配权限成功");
      this.$emit("update:permissionDialog", false);
    },
    handelClose() {
      this.$refs.perTree.setCheckedKeys([]); //清空数据
      this.$emit("update:permissionDialog", false);
      console.log(this.$refs.perTree.getCheckedKeys()); //获取选中的节点
    },
  },
};
</script>